// utils/chart.js
/**
 * 简化版的图表工具，基于Canvas绘制学习趋势图表
 */
class LearningTrendChart {
  constructor(canvasId, options) {
    this.canvasId = canvasId;
    this.width = options.width || 300;
    this.height = options.height || 200;
    this.labels = options.labels || [];
    this.data = options.data || [];
    this.title = options.title || '';
    this.backgroundColor = options.backgroundColor || '#ffffff';
    this.textColor = options.textColor || '#333333';
    this.gridColor = options.gridColor || '#e0e0e0';
    this.lineColor = options.lineColor || '#3b82f6';
    this.pointColor = options.pointColor || '#3b82f6';
    this.pointRadius = options.pointRadius || 4;
    this.fillColor = options.fillColor || 'rgba(59, 130, 246, 0.1)';
    this.context = null;
    this.init();
  }

  init() {
    const query = wx.createSelectorQuery();
    query.select('#' + this.canvasId)
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        this.context = ctx;

        // 设置canvas尺寸
        const dpr = wx.getSystemInfoSync().pixelRatio;
        canvas.width = this.width * dpr;
        canvas.height = this.height * dpr;
        ctx.scale(dpr, dpr);

        this.drawChart();
      });
  }

  drawChart() {
    if (!this.context) return;

    const ctx = this.context;
    const { width, height, labels, data } = this;

    // 清除画布
    ctx.clearRect(0, 0, width, height);

    // 绘制背景
    ctx.fillStyle = this.backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // 绘制标题
    ctx.font = '14px sans-serif';
    ctx.fillStyle = this.textColor;
    ctx.textAlign = 'center';
    ctx.fillText(this.title, width / 2, 20);

    // 计算坐标轴范围
    const padding = { top: 30, right: 20, bottom: 30, left: 30 };
    const chartWidth = width - padding.left - padding.right;
    const chartHeight = height - padding.top - padding.bottom;

    // 计算数据最大值和最小值
    const maxValue = Math.max(...data);
    const minValue = 0;
    const valueRange = maxValue - minValue;

    // 绘制网格线
    ctx.strokeStyle = this.gridColor;
    ctx.lineWidth = 1;

    // Y轴刻度和网格线
    const yTicks = 5;
    for (let i = 0; i <= yTicks; i++) {
      const y = padding.top + chartHeight - (i * chartHeight / yTicks);
      const value = minValue + (i * valueRange / yTicks);

      // 绘制水平线
      ctx.beginPath();
      ctx.moveTo(padding.left, y);
      ctx.lineTo(padding.left + chartWidth, y);
      ctx.stroke();

      // 绘制Y轴刻度
      ctx.font = '12px sans-serif';
      ctx.fillStyle = this.textColor;
      ctx.textAlign = 'right';
      ctx.fillText(Math.round(value), padding.left - 5, y + 5);
    }

    // X轴刻度和网格线
    const xStep = chartWidth / (labels.length - 1);
    for (let i = 0; i < labels.length; i++) {
      const x = padding.left + (i * xStep);

      // 绘制垂直线
      ctx.beginPath();
      ctx.moveTo(x, padding.top);
      ctx.lineTo(x, padding.top + chartHeight);
      ctx.stroke();

      // 绘制X轴刻度
      ctx.font = '12px sans-serif';
      ctx.fillStyle = this.textColor;
      ctx.textAlign = 'center';
      ctx.fillText(labels[i], x, height - padding.bottom + 20);
    }

    // 绘制折线
    ctx.strokeStyle = this.lineColor;
    ctx.lineWidth = 2;
    ctx.beginPath();

    // 绘制填充区域
    ctx.fillStyle = this.fillColor;
    ctx.beginPath();
    ctx.moveTo(padding.left, padding.top + chartHeight);

    for (let i = 0; i < data.length; i++) {
      const x = padding.left + (i * xStep);
      const y = padding.top + chartHeight - ((data[i] - minValue) / valueRange * chartHeight);

      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }

      // 绘制点
      ctx.fillStyle = this.pointColor;
      ctx.beginPath();
      ctx.arc(x, y, this.pointRadius, 0, Math.PI * 2);
      ctx.fill();

      // 继续绘制填充区域的边界
      ctx.strokeStyle = this.fillColor;
      ctx.lineTo(x, y);
    }

    // 完成填充区域
    ctx.lineTo(padding.left + (data.length - 1) * xStep, padding.top + chartHeight);
    ctx.closePath();
    ctx.fill();

    // 绘制折线
    ctx.strokeStyle = this.lineColor;
    ctx.lineWidth = 2;
    ctx.beginPath();

    for (let i = 0; i < data.length; i++) {
      const x = padding.left + (i * xStep);
      const y = padding.top + chartHeight - ((data[i] - minValue) / valueRange * chartHeight);

      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }

    ctx.stroke();
  }

  // 更新图表数据
  updateData(options) {
    this.labels = options.labels || this.labels;
    this.data = options.data || this.data;
    this.title = options.title || this.title;
    this.drawChart();
  }
}

module.exports = {
  LearningTrendChart
};